<template>
  <div class="lyric">
<!--  <scroll class="content" 
		   ref="scroll" 
		   @scroll="contentScroll" 
		   :pull-up-load="true"
		>
	   <ul>
	     <li
	       v-for="(line, index) in lyricArray"
	       :key="index"
	     >
	       {{ line[1] }}
	     </li>
	   </ul>
   </scroll> -->
   <el-row type="flex" justify="center" class="lyric-contain">
             <el-col :span="23" class="song-lyric" :style="lyricMove">
             <!-- 这里用内联样式来实现当前歌词的高亮显示 -->
               <el-row
                 v-for="(item,index) in lyricArray"
                 :key="index"
                 :style="{'font-size': (index==currentRow ? '1.3rem':'.9rem')}"
                 class="lyric-row"
               >{{item}}</el-row>
             </el-col>
           </el-row>
    <!-- <ul class="infinite-list" v-infinite-scroll="load"  v-for="(line, index) in lyricArray"
	       :key="index">
       <li   class="infinite-list-item item" ref="lineTop">{{line[1]}}</li>
     </ul> -->
  </div>
</template>

<script>

//import Scroll from 'components/common/scroll/Scroll'
import {parseLyric} from 'utils/parseLyric.js'
export default {
  name: 'Lyric',
  // components: {Scroll},
  props:['lyric','musicDuration'],
  data(){
	  return{
		  lyricArray:[],
		  lyricIndex: -1, //活跃的歌词行数
		  midIndex: 0,
		  length: 0,
		  isDarg: false, //是否在拖动歌词进度条，true的话禁用歌词scrollTo
		  load:true,
		  lyricCurrent:0,
		  currentRow:0,
		  lyricMove:0,
	  }
  },
   created() {
      this.lyricArray = parseLyric(this.lyric);
    }, 
	watch: {
	  lyric() {
	    this.lyricIndex = -1;
	    this.midIndex = 0;
	    // this.$refs.scroll.scrollTo(0, 0, true);
	    /**格式化歌词 */

	    this.lyricArray = parseLyric(this.lyric);
		console.log(this.lyricArray)
	
	    /**歌词改变，歌词列表刷新后重新计算刷新滚动条 */
	    // this.$nextTick(() => {
	      // this.refresh();
	      /**歌曲切换歌词滚动到最顶部 */
	      // this.$refs.scroll.scrollTo(0, 0);
	    // });
	  },
	  // musicDuration(musicDuration){
		 //  this.lyricArray.forEach((Element,index) =>{
			//   if(this.lyricCurrent == Element.time){
			// 	  this.lyricMove.top = -index * 2.5 + 24 + "px";
			// 	  this.currentRow = index;
			//   }
		 //  })
	  // }
	  /**监听歌曲播放时间，滚动歌词 */
	//   musicDuration(musicDuration) {
	//     /**歌词对应时间判断 */
	//     for (let i = 0; i < this.lyricArray.length; i++) {
	//       const line = this.lyricArray[i];
	//       const nextLine = this.lyricArray[i + 1];
	//       /**如果歌曲musicDuration大于当前行歌曲时间，并且，下一行不为空或者当前musicDuration小于下一行时间 */
	//       if (
	//         musicDuration >= line[0] &&
	//         (!nextLine || musicDuration < nextLine[0])
	//       ) {
	//         this.lyricIndex = i;
	//         /**如果歌词展示形式为列表，需要活跃歌词在中间时才滚动 */
	//         if (this.middle) {
	//           /**list形式时，活跃歌词不到中间不滚动 */
	//           if (
	//             this.lyricIndex < this.scrollNum ||
	//             this.lyricIndex > this.lyricArray.length - this.scrollNum
	//           )
	//             return;
	
	//           /**拖动进度条小球时不能自动滚动 */
	//           if (!this.isDarg) {
	//             this.$refs.scroll.scrollTo(
	//               -30 * (this.lyricIndex - this.scrollNum),
	//               2,
	//               false
	//             );
	//           }
	//         } else {
	//           this.$refs.scroll.scrollTo(-30 * this.lyricIndex, 0, false);
	//         }
	//       }
	//     }
	//   },
	/**监听歌曲播放时间，滚动歌词 */
	 musicDuration(musicDuration) {
	   /**歌词对应时间判断 */
	   for (let i = 0; i < this.lyricArray.length; i++) {
	     const line = this.lyricArray[i];
	     const nextLine = this.lyricArray[i + 1];
		 
         }
	  }
	},
	filters:{
		parseLyric(lyric){
			// return lrc
			// console.log(lyric)ss
		}
	},
	methods:{
		getList(){
		 
		},
		loadMore(){},
		contentScroll(){},
		/**强制刷新
		 * 解决播放器子组件偶尔打开无法滚动情况
		*/
		// handleRefresh() {
		//     this.$nextTick(() => {
		//         this.$refs.scroll.refresh();
		//     });
		// },
		
	}
}
</script>

<style lang="less" scoped>
.lyric{
	font-size: 14px;
	// width: 600px;
 //    height: 60px;
	// // background-color: #000000;
	// padding: 0px 20px;
	// overflow: hidden;
}
// .lyric ul {
//   text-align: center;
//   list-style-type: none;
// }
// .lyric ul li {
//   height: 30px;
//   line-height: 30px;
//   padding: 5px 0px;
//   white-space: nowrap;
//   text-overflow: ellipsis;
// }
// .player-action-light {
//   font-size: 28px;
//   color: var(--primary);
// }
// .player-action-dark {
//   font-size: 28px;
//   color: #b82525;
// }
// .player-action-green {
//   font-size: 28px;
//   color: var(--green-main-color);
// }
// /* list 形式时middle为true--改变字号 */
// .player-action-middle {
//   font-size: 13px;
//   text-align: left;
// }
// .item {
// 	position: relative;
// 	top: 0;
// 	left:center;
// }
</style>


